<template>
  <z-paging ref="pagingRef" v-model="list" @query="queryList" :auto="false">
    <template #top>
      <slot name="header"></slot>
    </template>
    <view class="cu-list menu-avatar padding-tb-sm" v-if="list">
      <view class="cu-item" v-for="(item,index) in list" :key="index" @click="handleRead(item)">
        <view class="cu-avatar round lg"
              :style="'background-image:url('+prefix+item.toAvatar+');'">
        </view>
        <view class="content">
          <view class="text-lg text-red">
            {{ item.toName }}
          </view>
          <view v-if="item.lastType===1" class="text-gray text-sm text-cut" style="width: 50vw">
            {{ item.lastContent }}
          </view>
          <view v-else-if="item.lastType===2" class="text-gray text-sm">
            [语音]
          </view>
          <view v-else-if="item.lastType===3" class="text-gray text-sm">
            [图片]
          </view>
          <view v-else class="text-gray text-sm text-cut" style="width: 200px">
            {{ item.lastContent }}
          </view>
        </view>
        <view class="action text-gray">
          <view class="text-lg">{{ myMoment(item.lastTime).format("M-D HH:mm") }}</view>
          <view class="cu-tag round sm bg-red" v-if="item.noReadNum">{{ item.noReadNum }}</view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import api from "@/api";
import {nextTick, ref} from "vue";
import myMoment from "@/utils/common/myMoment";

import {imagePathPrefix} from '/settings'

const prefix = imagePathPrefix

const pagingRef = ref()

const list = ref()


/**
 * 点击好友
 * @param row
 */
const handleRead = (row: any) => {
  row.noReadNum = 0
  let params = {
    chatFriends: row
  }
  uni.navigateTo({
    url: '/pages/common/chat/chat?params=' + encodeURIComponent(JSON.stringify(params))
  })
}

const queryList = (pageNo: any, pageSize: any) => {
  api.chat.friendsList({}).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data
      Object.keys(tmp).forEach(key => {
        tmp[key].lastContent = JSON.parse(tmp[key].last).lastContent
        tmp[key].lastTime = JSON.parse(tmp[key].last).lastTime
        tmp[key].lastType = JSON.parse(tmp[key].last).lastType
        tmp[key].lastSize = JSON.parse(tmp[key].last).lastSize
      })
      tmp= tmp.sort((a:any,b:any)=>{
        return a.lastTime<b.lastTime?1:-1
      })
      pagingRef.value.complete(tmp);
    }
  })
}

const doClear = () => {
  pagingRef.value.clear()
}
const doReload = () => {
  pagingRef.value.reload();
}

const doLoadMore = () => {
  pagingRef.value.doLoadMore();
}

const doAddNum = (params: any) => {
  let tmp = JSON.parse(params)
  let item: any
  Object.keys(list.value).forEach(key => {
    console.log(key, list.value[key])
    if (list.value[key].toUsername === tmp.username) {
      item = list.value[key]
    }
  })
  list.value.splice(list.value.indexOf(item), 1)
  item.noReadNum += 1
  item.lastContent = tmp.message
  item.lastTime = Date.now()
  list.value.unshift(item)
}

const emits = defineEmits(['heightChanged'])

defineExpose({
  doReload,
  doLoadMore,
  doAddNum,
  doClear
})
</script>

<style scoped>
.tui-item-box {
  width: 100%;
  display: flex;
  align-items: center;
}

.tui-msg-box {
  display: flex;
  align-items: center;
}


.tui-msg-item {
  max-width: 500 rpx;
  min-height: 80 rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tui-msg-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 34 rpx;
  line-height: 1;
  color: #262b3a;
}

.tui-msg-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
  font-size: 26 rpx;
  line-height: 1;
  color: #9397a4;
}

.tui-msg-right {

  height: 88px;
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}


.tui-msg-time {
  width: 100%;
  font-size: 24 rpx;
  line-height: 24 rpx;
  color: #9397a4;
}
</style>